<template>
    <div class="app-container333">
        <vue-ueditor-wrap v-model="content" :config="config"  
            :editor-dependencies="editorDependencies"
            @beforeInit="addCustomButtom" />

        <el-dialog  title="提示" :visible.sync="dialogVisible"  width="30%" >
            <div class="phone-preview">  
                <div class="phone-screen" v-html="content"></div>  
            </div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span> -->
        </el-dialog>

    </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
    name: '',
    components: { VueUeditorWrap },
    props: {

        value: {
            type: String,
            default: ''
        },

        height: {
            type: Number,
            default: 300
        },

    },
    data() {
        return {

            dialogVisible:false ,

            content: '',
            // 富文本编辑器配置
            config: {
                initialFrameWidth: '100%',
                initialFrameHeight: this.height ,
                UEDITOR_HOME_URL: './lib/UEditor/',
                scaleEnabled:true
            },

            editorDependencies:[
                "ueditor.config.js", "ueditor.all.min.js", 
                "lang/zh-cn/zh-cn.js", "135editor.js"
            ]

        }
    },
    watch: {
        /*  响应式绑定被失效 暂时使用watch监听修改子组件值 */
        value: {
            immediate: true,
            handler(value) {
                this.content = value
            }
        },
        content: {
            handler(value) {
                this.$emit('input', value)
            }
        }
    },

    created(){

        /**
         * Created by shunchen_yang on 16/10/25.
         */
        

    },

  

    methods: {

        addCustomButtom (editorId) {

            var that = this

            window.UE.registerUI('dialog', function (editor, uiName) {

                console.log( editor  );

                var btn = new window.UE.ui.Button({
                    name   : 'xiumi-connect',
                    title  : '秀米',
                    cssRules: 'background-image: url(\'https://ent.xiumi.us/ue/xiumi_logo_40.png\') !important;background-size: cover',
                    onclick: function () {
                        var dialog = new window.UE.ui.Dialog({
                            iframeUrl:  editor.ui.UEDITOR_HOME_URL +  '/xiumi-ue-dialog-v5.html',
                            editor   : editor,
                            name     : 'xiumi-connect',
                            title    : "秀米图文消息助手",
                            cssRules : "width: " + (window.innerWidth - 60) + "px;" + "height: " + (window.innerHeight - 60) + "px;",
                        });
                        dialog.render();
                        dialog.open();
                    }
                });

                return btn;
            });

           
            // test-button 这个原数组需要存在  取之前的名字  或者 更改源码
            window.UE.registerUI('test-button',  (editor, uiName) => {
                // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
                // editor.registerCommand(uiName, {
                //   execCommand: function () {
                //     editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`)
                //   }
                // })

                // 创建一个 button
                const btn = new window.UE.ui.Button({
                    // 按钮的名字
                    name: uiName,
                    // 提示
                    title: '',
                    // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
                    cssRules: 'background-image: url(\'http://nwyh.sxsihe.com/admin/static/ueditor/themes/default/images/phone_android.png\') !important;background-size: cover',
                    // 点击时执行的命令
                    onclick: function () {

                        console.log( editor.ui.UEDITOR_HOME_URL )

                        var dialog = new UE.ui.Dialog({
                            iframeUrl: editor.ui.UEDITOR_HOME_URL + '/preview.html',
                            editor: editor,
                            name: 'previewh5',
                            title: 'previewh5',
                            cssRules:
                                'box-sizing:border-box;position:absolute;top:50%;left: 50%;transform: translate(-50%, -50%); width:356px;height: 713px;background-size:356px 713px;'
                        });
                        that.previewh5 = dialog;
                        dialog.render();
                        dialog.open();

                        // that.dialogVisible = true
                    }
                })
                // 粘贴后的事件
                editor.addListener('afterpaste', function (cmd,html) {
                
                })
                // 粘贴前的事件
                editor.addListener('beforepaste',(cmd, html)=> {

                })

                // 因为你是添加 button，所以需要返回这个 button
                return btn
            })

            
        }


    }
}
</script>


<style>


    .edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon {
        background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;
        background-size: 85%;
        background-position: center;
        background-repeat: no-repeat;
    }


    .edui-button.edui-for-previewh5 .edui-button-wrap .edui-button-body .edui-icon {
        background-image: url("https://upload-images.jianshu.io/upload_images/13429147-2724e832a57b6ab1.png?imageMogr2/auto-orient/strip|imageView2/2/w/411/format/webp") !important;
        background-size: contain;
    }

</style>